<script setup>
import { ref,reactive,computed,watch,watchEffect,onMounted,nextTick} from "vue";
import DirItem from "./dir-item.vue";

const props=defineProps({
	data:{
		type:Object,
		default:()=>({
			key:"",
			title:"",
			icon:"",
			isOpen:true,
            children:[],
            handle:()=>{}
		})
	},
	show:Boolean,
	tabSize:Number
})
const emits=defineEmits(["dir-action"])
function click(e,item){
	if(item?.handle){
		item.handle(item?.title, item?.children,e)
	}
}
function goOn(e){
	emits('dir-action',e)
}
</script>


<template>
<div class="dir-group" v-for="item in data" v-show="show">
		<dir-item v-if="item"
		:data="item"
		@dir-action="goOn"
		:handle="item.handle"
		:isOpen="item.isOpen" :title="item.title" :icon="item.icon" :children="item.children" :isGroup="!!item.isGroup" :tabSize="tabSize+1"
		></dir-item>
</div>
</template>

<style scoped>

.dir-group{
    width: 100%;
	box-sizing: border-box;
	position: relative;
}
</style>